<template>
  <div id="big">
    <header id="header" class="wrapper-gradient animated slideInDown">
      <h3 class="header-title" @click="qp()">消防员素质管理平台</h3>
      <div class="header-info header-info-r">
        <div class="showTime">
          <!-- <span class="time"> 
              <router-link to="/login">退出登录</router-link></span> -->

          <span class="date">
            <span>{{ date }}</span>
            <span>{{ week }}</span>
          </span>
          <span class="time">{{ nowTime }}</span>
        </div>
      </div>
    </header>
    <div id="container">
      <div class="left">
        <div class="title">BMI值</div>
        <div class="block">
          <dv-border-box-7>
            <PieChart3D />
          </dv-border-box-7>
        </div>
        <div class="title">体能训练</div>
        <div class="block">
          <dv-border-box-7>
            <BarChartTwo></BarChartTwo>
          </dv-border-box-7>
        </div>
        <div class="block">
          <dv-border-box-7>
            <LineChartOne></LineChartOne>
          </dv-border-box-7>
        </div>
      </div>
      <div class="center">
        <div class="title">
          <span>当前行政区域：江苏</span>
        </div>

        <div class="block1">
          <dv-border-box-7>
            <div class="mapout">
              <div class="map1"></div>
              <div class="map2"></div>
              <HuangshiMap />
            </div>
           
            <!-- <graph-chart :min='min' :max='max' :chartData = GraphData /> -->
          </dv-border-box-7>
        </div>
        <div class="title2">城市排名TOP</div>
        <div class="bottom">
          <dv-border-box-7>
            <CityRanking />
          </dv-border-box-7>
        </div>
      </div>
      <div class="right">
        <div class="title">技能</div>
        <div class="block">
          <dv-border-box-7>

            <PieChart />

          </dv-border-box-7>
        </div>
        <div class="title">业务理论</div>
        <div class="block">
          <dv-border-box-7>
            <BarChartOne />
          </dv-border-box-7>
        </div>
        <div class="title">全报互动</div>
        <div class="block"><dv-border-box-7>
            <CarouselImg></CarouselImg>
          </dv-border-box-7></div>
      </div>
    </div>
    <footer id="footer" class="sfooter afooter"></footer>
  </div>
</template>

<script>
import PieChart3D from "./chart/PieChart3D.vue";
import HuangshiMap from "./chart/huangshiMap.vue";
import PieChart from "./chart/PieChart.vue";
import BarChartOne from "./chart/BarChartOne.vue";
import LineChartOne from "./chart/LineChartOne.vue";
import BarChartTwo from "./chart/BarChartTwo.vue";
import CityRanking from "./chart/CityRanking.vue";
import CarouselImg from "./chart/CarouselImg.vue";

// import GraphChart from "../components/alargeScreen/GraphChart";
// import BarChart from "../components/alargeScreen/BarChart";
// import TableChart from "../components/alargeScreen/TableChart";
// import TableMoneyFlow from "../components/alargeScreen/TableMoneyFlow";
// import { showdata ,dataget} from "../assets/js/api";


export default {
  // name: "Brand",
  components: {
    PieChart3D,
    HuangshiMap,
    PieChart,
    BarChartOne,
    LineChartOne,
    BarChartTwo,
    CityRanking,
    CarouselImg

    // GraphChart,
    // BarChart,
    // TableChart,
    // TableMoneyFlow
  },

  data() {
    return {
      socket: null,
      messages: [],
      fast_trade_data: [],
      top10_transactions: [],
      total_amount: [],
      yearly_transactions: {},
      GraphData: [],
      money_flow: [],
      min: "0",
      max: "0",

      nowTime: "",
      week: "",
      date: "",
      timer: null,
      imgSrc: "",
      weatcherData: {},
      startVal: 0,
      geoCoordMap: {},

      totalUserCount: 0,
      praisePercent: 0,
      totalReviewCount: 0,
      boardConfig: {
        data: [],
        unit: "单位",
        valueFormatter({ value }) {
          const reverseNumber = (value + "").split("").reverse();
          let valueStr = "";

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join("");
            valueStr += seg;
            if (seg.length === 3) valueStr += ",";
          }

          return valueStr.split("").reverse().join("");
        },
      },



    };
  },
  computed: {},
  watch: {
    total_amount(newV, oldV) {
      // do something, 可使用this
      // this.showChart();
    },
  },
  created() {
    //   this.getData();

  },
  mounted() {
    //  this.showChart();
    // this.getData();
    // this.connectToSocketServer();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60);

    this.nowTimes();
  },
  methods: {
    getData() {
      const ret = showdata().then((res) => {
        this.fast_trade_data = res.fast_trade_data;
        this.top10_transactions = res.top10_transactions;
        this.total_amount = res.total_amount;
        this.yearly_transactions = res.yearly_transactions;
        this.money_flow = res.money_flow;
        console.log(this.money_flow);
      });
      const ret2 = dataget().then((res) => {
        this.GraphData = res.data;
        this.max = res.max;
        this.min = res.min;
      });
    },
    showChart() {
      var datav_data01 = [];
      for (const key in this.total_amount) {
        var obj = {};
        obj.name = this.total_amount[key].账户开户名称;
        obj.value = this.total_amount[key].总金额;
        datav_data01.push(obj);
      }
      this.boardConfig = {
        data: datav_data01,
        unit: "单位",
        valueFormatter({ value }) {
          // const reverseNumber = (value + "").split("").reverse();
          // let valueStr = "";

          // while (reverseNumber.length) {
          //   const seg = reverseNumber.splice(0, 3).join("");
          //   valueStr += seg;
          //   if (seg.length === 3) valueStr += ",";
          // }

          return value + "元";
        },
      };
    },
    qp() {
      // document.documentElement.requestFullscreen();
      // document.getElementById('ml').style.display = false
      // 判断浏览器是否支持Fullscreen API
      let element = document.getElementById("app");
      if (
        element.fullscreenElement ||
        element.webkitFullscreenElement ||
        element.msFullscreenElement ||
        element.mozFullScreenElement
      ) {
        // 如果当前是全屏状态，则尝试退出全屏
        if (element.exitFullscreen) {
          element.exitFullscreen();
        } else if (element.webkitExitFullscreen) {
          element.webkitExitFullscreen();
        } else if (element.msExitFullscreen) {
          element.msExitFullscreen();
        } else if (element.mozCancelFullScreen) {
          element.mozCancelFullScreen();
        }
      } else {
        // 如果当前不是全屏状态，则尝试进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        }
      }
    },
    timeFormate(timeStamp) {
      //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month =
        newDate.getMonth() + 1 < 10
          ? "0" + (newDate.getMonth() + 1)
          : newDate.getMonth() + 1;
      let date =
        newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
      let hh =
        newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
      let mm =
        newDate.getMinutes() < 10
          ? "0" + newDate.getMinutes()
          : newDate.getMinutes();
      let ss =
        newDate.getSeconds() < 10
          ? "0" + newDate.getSeconds()
          : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "星期" + weeks[week];
      this.week = getWeek;
      this.date = year + "." + month + "." + date;
      this.nowTime = hh + ":" + mm + ":" + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
#big {
  width: 100%;
  height: 100vh;
  // background: #0a1631 url("../../assets/alarge/bg.jpg") no-repeat center center fixed;
  background-size: 100% 100%;
  font-family: "Microsoft Yahei", Arial, sans-serif;
  background: #353334 url("../../assets/alarge/首页.png") 0 0 / 100% 100% no-repeat;
}

#header {
  position: relative;
  height: 50px;
  background: url("../../assets/alarge/header.png") 0 0 / 100% 100% no-repeat;
  overflow: hidden;
}

.animated {
  animation-duration: 3s;
  animation-fill-mode: both;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

.afooter {
  animation-duration: 3s;
  animation-fill-mode: both;
}


@keyframes sfooter {
  0% {
    transform-origin: 0 0;
    transform: translateY(100%);
  }

  100% {
    transform-origin: 0 0;
    transform: translateY(0%);
  }
}

.sfooter {
  animation-name: sfooter;
}

.header-title {
  line-height: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
}

.header-info {
  position: absolute;
  top: 25px;
  font-size: 12px;
  color: #73aae5;
}

.header-info-l {
  left: 20px;
}

.header-info-r {
  right: 20px;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: url("../../assets/alarge/footer.png") 0 0 / 100% 100% no-repeat;
}

// 主要部分
#container {
  width: 100%;
  height: 93%;
  position: absolute;
  top: 50px;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  // background-color: #fff;
}

.left {
  height: 100%;
  // background-color: rgb(216, 76, 76);
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .title {
    background: url("../../assets/alarge/left-title.png") 0 0 / 100% 100% no-repeat;
    /*小标题名称*/
    /** 文本1 */
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4.08px;
    line-height: 30px;
    color: rgba(0, 252, 255, 1);
    text-align: left;
    // 向右偏移8%
    text-indent: 8%;
    vertical-align: top;
  }
}

.left>.block {
  height: 30%;
  width: 98%;
  margin-bottom: 8%;
  // background-color: rgb(190, 238, 17);
}

.right {
  height: 100%;
  // background-color: rgb(216, 76, 76);
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .title {
    background: url("../../assets/alarge/left-title.png") 0 0 / 100% 100% no-repeat;
    /*小标题名称*/
    /** 文本1 */
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4.08px;
    line-height: 30px;
    color: rgba(0, 252, 255, 1);
    text-align: left;
    // 向右偏移8%
    text-indent: 8%;
    vertical-align: top;
  }

  .block {
    height: 26%;
    width: 98%;
    margin-bottom: 5%;
    // background-color: rgb(190, 238, 17);
  }
}

.center {
  height: 100%;
  // background-color: rgb(216, 76, 76);
  width: 47%;

  .block1 {
    width: 100%;
    height: 65%;
    margin-bottom: 2%;
  }

  .title {
    background: url("../../assets/alarge/center-title.png") 0 0 / 100% 100% no-repeat;
    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 4.08px;
    line-height: 30px;
    color: rgba(0, 252, 255, 1);
    text-align: center;
    vertical-align: top;
  }

  .title2 {
    width: 100%;
    background: url("../../assets/alarge/left-title.png") 0 0 / 100% 100% no-repeat;
    /*小标题名称*/
    /** 文本1 */
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4.08px;
    line-height: 30px;
    color: rgba(0, 252, 255, 1);
    text-align: left;
    // 向右偏移8%
    text-indent: 8%;
    vertical-align: top;
  }

  .bottom {
    width: 100%;
    height: 25%;
  }
}

.mapout {
  width: 100%;
  height: 100%;
  position: relative;

}

.map1 {
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(~@/assets/alarge/map.png);
    background-size: 100% 100%;
    opacity: 0.2;
  }

  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:60%;
    height: 100%;
    background: url(~@/assets/alarge/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 5;
    background-size: 100% 100%;
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
     
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

.middle>.block1 .title {
  width: 100%;
  height: 30px;
  // background-color: rgba(150, 30, 30, 0.185);
}
</style>